<template>
  <div class="side">
    <template v-for="(item,index) in ganttData">
      <div :key="index" :style="sideHeight">
        <!-- <slot name="side-box-content" slot-scope="{item}" :item="item" /> -->
        <div class="sideInfo" @click="handleUserCard(item)">
          <el-tooltip :content="$t('calendar.tips.contentTip')" placement="top">
            <i v-show="item.clash" class="iconfont icon-jinggao"></i>
          </el-tooltip>
          <span class="task-pointer" v-user="item.userId" style="min-width: 40px;"><img :src="head(item.userHead || item.head)"></span>
          <span>
            <template v-if="isOpenData && item.staffId">
              <open-data :openid="item.staffId"></open-data>
            </template>
            <template v-else>
              {{item.displayName || item.userName}}
            </template>
          </span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform'
import { getOssUrl } from '@src/util/assets'
const defaultAvatar = getOssUrl('/avatar.png')
export default {
  name: 'chart-side',
  inject: ['ganttChartInstance'],
  props: {
    ganttData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    sideHeight() {
      return { lineHeight: `${this.ganttChartInstance.baseBlock}px` }
    },
  },
  data() {
    return {
      isOpenData
    }
  },
  methods: {
    head(src){
      if(!src) return defaultAvatar;
      return src;
    },
    handleUserCard(item){
      const { type } = this.ganttChartInstance
      this.$emit('agendaUserCard', item)
      this.$eventBus.$emit(`agenda-${type}-user-card`, item)
    }
  },
}
</script>

<style scoped lang="scss">
.side {
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  //cursor: pointer;
  user-select: none;
  & > div {
    display: grid;
    grid-template-columns: 0px 1fr;
    &::before {
      color: inherit;
      width: 0px;
      top: 8px;
      border-radius: 7px 0 0 7px;
      content: '';
      background-color: currentColor;
      display: block;
    }
  }
  .sideInfo{
    display: flex;
    justify-content: left;
    padding-left: 10px;
    color: black;
    overflow:hidden;
    font-size: 0.5em;
    flex-direction: row;
    white-space:nowrap;
    text-overflow:ellipsis;
    background: #fff!important;
    position: relative;
    // border-right: 1px solid #f5f5f5;
    // border-bottom: 1px solid #f5f5f5;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-top: 5px;
      margin-right: 5px;
      object-fit: cover;
    }
    span {
      @include text-ellipsis();
    }
    .icon-jinggao {
      line-height: 17px;
      position: absolute;
      left: 4px;
      top: -2px;
      color: #FF4D4F;
      font-size: 17px;
    }
  }
}
</style>
